<template>
  <el-dialog v-model="guestInfoOpen" title="顾客信息详情" width="40%" append-to-body>
    <!-- 基础信息卡片 -->
    <el-card class="mb-20">
      <el-descriptions column="3" border :column-props="{ lg: 3, md: 2, sm: 1 }">
        <el-descriptions-item label="顾客编号">
          <span class="text-primary">{{ form.guestId }}</span>
        </el-descriptions-item>

        <el-descriptions-item label="性别">
          <dict-tag :options="sys_user_sex" :value="form.sex" />
        </el-descriptions-item>

        <el-descriptions-item label="联系电话">
          <span class="text-primary">{{ form.mobile }}</span>
        </el-descriptions-item>

        <el-descriptions-item label="邮箱">
          <span class="text-primary">{{ form.email }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">地址信息</el-divider>

      <el-table :data="addressList" class="address-table">
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="收货人" align="center" prop="deliveryName" />
        <el-table-column label="联系电话" align="center" prop="deliveryPhone" />
        <el-table-column label="地区" align="center">
          <template #default="scope">
            {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.district }}
          </template>
        </el-table-column>
        <el-table-column label="详细地址" align="center" prop="detailAddress" />
        <el-table-column label="是否默认" align="center" prop="isDefault" width="90">
          <template #default="scope">
            <dict-tag :options="is_default" :value="scope.row.isDefault" />
          </template>
        </el-table-column>
        <el-table-column label="地址标签" align="center" prop="addressTag" width="90">
          <template #default="scope">
            <dict-tag :options="address_tag" :value="scope.row.addressTag" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getGuest } from "@/api/ruoyi/guest";
import { listAddress } from "@/api/ruoyi/address";
import { useDict } from '@/utils/dict'

const { is_default, address_tag, sys_user_sex } = useDict(
  "is_default", "address_tag", "sys_user_sex"
);

const props = defineProps({
  visible: Boolean,
  guestId: {
    type: [Number, String],
    required: true
  }
})

const emit = defineEmits(['update:visible'])

// 对话框显示状态
const guestInfoOpen = ref(false)
// 表单数据
const form = ref({})
// 地址列表
const addressList = ref([])

watch(() => props.visible, (newVal) => {
  guestInfoOpen.value = newVal
  if (newVal) {
    loadGuestInfo()
  }
})

watch(guestInfoOpen, (newVal) => {
  if (!newVal) {
    emit('update:visible', false)
  }
})

// 加载顾客信息
const loadGuestInfo = async () => {
  try {
    // 获取顾客基本信息
    const guestRes = await getGuest(props.guestId)
    form.value = guestRes.data

    // 获取地址信息
    const addressRes = await listAddress({ guestId: props.guestId })
    addressList.value = addressRes.rows
  } catch (error) {
    console.error('获取顾客信息失败:', error)
  }
}
</script>

<style scoped>
.mb-20 {
  margin-bottom: 20px;
}

.text-primary {
  color: #1890ff;
}

.address-table {
  margin-top: 15px;
}
</style>